import React, { Component,createRef } from 'react';
import Model from '@/model/common'
import AddUsers from './AddUsers'
import Update from './Update'
import { Pagination, Modal, Button, message,Table, Space } from 'antd';
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import {
    PieChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';
import './Home.css'

echarts.use(
    [TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer]
);
class UserControl extends Component {
    state = {
        isModalVisible: false,
        isModalVisible2: false,
        defaultCurrent: 1,
        userlist: [],
        pagelinklist: [],
        total: 0,
        isModalVisible3: false,
        update_id: 0,
        statistics: [],
        getoneupdate:{}
    }
    columns = [
        {
            title: 'Id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '性别',
            key: 'gender',
            dataIndex: 'gender',
            render: (gender) => {
               return  gender === "1" ? '男' : gender === "2" ? '女' : "保密"
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render:(status)=>{
               return status === "1" ?'正常':'禁用'
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => 
            (
                <Space size="middle">
                    <span onClick={() => this.showModal3(record)} style={{ color: '#1890FF', paddingRight: "10px", cursor: 'pointer' }}>
                        修改
                    </span>
                    <span style={{ color: '#1890FF', cursor: 'pointer' }} onClick={() => this.delUsers(record.id)}   >
                        删除
                    </span>
                </Space>
            ),
        },
    ];
    render() {
        let { userlist, total, defaultCurrent, update_id } = this.state;
        return (
            <>
                <div className="userlist-head"><h1>用户列表</h1> <p>通过本功能模块，可以实现对数据的新增/修改/删除/查询/统计</p>
                    <div className="btns">
                        <Button type="default" onClick={this.showModal}>
                            统计
                    </Button>
                        <Button type="primary" onClick={this.showModal2}>
                            新增
                    </Button>
                    </div>
                </div>
                {/* <div className="userlist-container">
                    <table className="userlist-table" width="100%" border='0'>
                        <thead>
                            <tr>
                                <td>用户id</td>
                                <td>用户名</td>
                                <td>邮箱</td>
                                <td>性别</td>
                                <td>手机号</td>
                                <td>状态</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            {userlist.map((el) => {
                                return (
                                    <tr key={el.id}>
                                        <td>{el.id}</td>
                                        <td>{el.username}</td>
                                        <td>{el.email}</td>
                                        <td>{Number(el.gender) === 1 ? '男' : Number(el.gender) === 3 ? '保密' : "女"}</td>
                                        <td>{el.mobile}</td>
                                        <td>{el.status === "1" ? '正常' : '禁用'}</td>
                                        <td>
                                            <span onClick={() => this.showModal3(el.id)} style={{ color: '#1890FF', paddingRight: "10px", cursor: 'pointer' }}>
                                                修改
                            </span>
                                            <span style={{ color: '#1890FF', cursor: 'pointer' }} onClick={() => this.delUsers(el.id)}   >
                                                删除
                            </span>
                                        </td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>

                </div> */}
                <Table
                    size="small"
                    columns={this.columns}
                    className='antdtable'
                    pagination={false}
                    dataSource={userlist}
                    rowKey={(row) => row.id }
                />
                <Pagination current={defaultCurrent} total={total} onChange={this.getPage} pageSizeOptions={[10]}></Pagination>
                <Modal title="修改" mask={false} destroyOnClose visible={this.state.isModalVisible3} onOk={this.handleOk3} onCancel={this.handleCancel3} okText="确认" cancelText="取消">
                    <Update sendId={update_id} sendRender={this.state.isModalVisible3} getisshow={this.getIsShow3} sentuserInfo={this.state.getoneupdate}></Update>
                </Modal>
                <Modal title="统计" centered destroyOnClose visible={this.state.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} okText="确认" cancelText="取消">
                    <div id="showstatistics" style={{ height: '450px', width: "600px" }}></div>
                </Modal>
                <Modal title="添加用户" centered destroyOnClose visible={this.state.isModalVisible2} onOk={this.handleOk2} onCancel={this.handleCancel2} okText="确认" cancelText="取消">
                    <AddUsers getIsShow2={this.addAfter}></AddUsers>
                </Modal>

            </>
        );
    }
    //打开页面默认渲染第一页的用户数据
    componentDidMount() {
        //渲染用户列表
        this.getusers('', 1)
    }
    //获取用户请求
    getusers(keyword, page) {
        Model.getusers(`?keyword=${keyword}&page=${page}`).then(ret => {
            console.log(ret);
            this.setState(() => {
                return {
                    userlist: ret.paginate.data,
                    pagelinklist: ret.paginate.links,
                    total: ret.paginate.total,
                    defaultCurrent: ret.paginate.current_page
                }
            })
        })
    }
    //获取页码渲染数据
    getPage = (page) => {
        // console.log(page,pgsize);
        this.getusers('', page)
    }
    //修改成功 自动关闭窗口
    getIsShow3=(flag)=>{
        this.setState(() => {
            return {
                isModalVisible3: flag,
            }
        })
        this.getusers('', this.state.defaultCurrent)
    }
    //增加成功后 自动关闭窗口
    addAfter=(flag)=>{
        this.setState(() => {
            return {
                isModalVisible2: flag,
            }
        })
    }
    //统计弹窗显示
    showModal = () => {
        this.setState(() => {
            return {
                isModalVisible: true,
            }
        })
        this.setState(() => {
            Model.statistics_users().then(ret => {
                console.log(ret);
                if (ret.errNo === 0) {
                    this.setState(() => {
                        return {
                            statistics: ret.data,
                        }
                    }, () => {
                        var chartDom = document.getElementById('showstatistics');
                        var myChart = echarts.init(chartDom);
                        var option;
                        console.log(chartDom);
                        option = {
                            title: {
                                text: '本站会员性别比例饼状图',
                                subtext: '数据来自于数据库',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                            },
                            series: [
                                {
                                    name: '性别',
                                    type: 'pie',
                                    radius: '50%',
                                    data: this.state.statistics,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        option && myChart.setOption(option);
                    })
                }
                else {
                    message.error(ret.errText)
                }
            })
        })

    };
    //增加弹窗显示
    showModal2 = () => {
        this.setState(() => {
            return {
                isModalVisible2: true
            }
        })

    };
    //统计用户确认
    handleOk = () => {
        this.setState(() => {
            return {
                isModalVisible: false
            }
        })
    };
    //增加用户确认弹窗
    handleOk2 = () => {
        this.setState(() => {
            return {
                isModalVisible2: false
            }
        })
    };
    //统计用户弹窗取消
    handleCancel = () => {
        this.setState(() => {
            return {
                isModalVisible: false
            }
        })
    };
    //增加用户弹窗取消
    handleCancel2 = () => {
        this.setState(() => {
            return {
                isModalVisible2: false
            }
        })
    };
    //修改
    showModal3 = (info) => {
        console.log(info.id);
        this.setState(() => {
            return {
                isModalVisible3: true,
                update_id: info.id,
                getoneupdate:info
            }
        }
        // ,()=>{
        //     let {userlist,update_id } = this.state
        //     if(update_id!==0){
        //         userlist.forEach(el=>{
        //             if(el.id === update_id)
        //             {
        //                 let one = el
        //                 this.setState(()=>{
        //                     return {
        //                         getoneupdate:one
        //                     }
        //                 },()=>{
        //                     console.log(this.state.getoneupdate);
        //                 })
        //             }
        //         })
        //     }
        // }
        )
    }
    handleOk3 = () => {
        this.setState(() => {
            return {
                isModalVisible3: false
            }
        })
    };
    handleCancel3 = () => {
        this.setState(() => {
            return {
                isModalVisible3: false
            }
        })
    };
    //删除用户 实际是状态改为禁用 并且状态不可逆转
    delUsers = (id) => {
        console.log(id);
        let del = window.confirm('确认删除该用户?状态不可逆转！')
        if (del) {
            Model.del_users(id).then(ret => {
                console.log(ret);
                if(ret.errNo===0)
                {
                    message.success('删除成功！状态改为禁用!',2,()=>{
                        this.getusers('', this.state.defaultCurrent)
                    })
                }
            })
        }
        else {

        }
    }
}

export default UserControl;
